<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="keywords" content="">
		<meta name="description" content="">
		<title>筛选</title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/public.css" />
		<link rel="stylesheet" href="css/font-awesome.css" />
		<link rel="stylesheet" href="css/style.css" />
	</head>
	<body>
		<div class="header">
			<div class="header-bd">
				<div class="nav">
					<span class="fa fa-bars" aria-hidden="true"></span>
					导航
					<span class="fa fa-caret-down" aria-hidden="true"></span>
				</div>
				<div class="nav-list">
					<div>
						<label>电影</label>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
					</div>
					<div>
						<label>电视剧</label>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
					</div>
					<div>
						<label>动漫</label>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
					</div>
				</div>
				<div class="logo"><img src="img/logo.png" alt="" /></div>
				<div class="search">
					<div class="top">
						<div class="input-search">
							<input type="text" name="" id="" value="" />
							<a href="#"><img src="img/search.png" alt="" /></a>
						</div>
						<div class="ranking">
							<a href="#"><img src="img/ranking.png" alt="" /></a>
						</div>
					</div>
					<ul>
						<li><a href="#">权利的游戏</a></li>
						<li><a href="#">纸牌屋</a></li>
						<li><a href="#">斯巴达克斯</a></li>
						<li><a href="#">太阳的后羿</a></li>
						<li><a href="#">欢乐颂</a></li>
					</ul>
				</div>
				<div class="sign">
					<a href="#">登录</a>
					<a href="#">注册</a>
				</div>
			</div>			
		</div>
		<div class="all-bd">
			<div class="advier"></div>
			<div class="sift">
				<div class="kg">
					<span>展开选项</span>
					<img src="img/open.png" alt="" />
				</div>
				<div class="first-title">
					<div class="channel">频道</div>
					<ul class="channel-style">
						<li class="li-choose">电视剧</li>
						<li>电影</li>
						<li>动漫</li>
					</ul>
				</div>
				<div class="second-title">					
					<!--<div class="selectNumberScreen">-->
						<div id="selectList" class="screenBox screenBackground">						
							<dl class="listIndex" attr="terminal_brand_s">
								<dt>地区</dt>
								<dd>
									<a href="javascript:void(0)" class="a-choose">全部</a> 
									<a href="javascript:void(0)" >内地</a>
									<a href="javascript:void(0)" >香港</a> 
									<a href="javascript:void(0)" >台湾</a> 
									<a href="javascript:void(0)" >日本</a> 
									<a href="javascript:void(0)" >韩国</a> 
									<a href="javascript:void(0)" >美国</a> 
									<a href="javascript:void(0)" >印度</a> 
									<a href="javascript:void(0)" >泰国</a> 
									<a href="javascript:void(0)" >欧洲</a>
									<a href="javascript:void(0)" >其他</a>									
								</dd>
							</dl>							
							<dl class="listIndex" attr="价格范围">
								<dt>类型</dt>
								<dd>
									<a href="javascript:void(0)" class="a-choose">全部</a> 
									<a href="javascript:void(0)" >喜剧</a>
									<a href="javascript:void(0)" >悲剧</a> 
									<a href="javascript:void(0)" >爱情</a> 
									<a href="javascript:void(0)" >动作</a> 
									<a href="javascript:void(0)" >枪战</a> 
									<a href="javascript:void(0)" >犯罪</a> 
									<a href="javascript:void(0)" >惊悚</a> 
									<a href="javascript:void(0)" >恐怖</a> 
									<a href="javascript:void(0)" >悬疑</a>
									<a href="javascript:void(0)" >动画</a>
									<a href="javascript:void(0)" >家庭</a> 
									<a href="javascript:void(0)" >奇幻</a> 
									<a href="javascript:void(0)" >魔幻</a> 
									<a href="javascript:void(0)" >科幻</a>
									<a href="javascript:void(0)" >战争</a>
								</dd>
							</dl>							
							<dl class=" listIndex" attr="terminal_os_s">
								<dt>年份</dt>
								<dd>
									<a href="javascript:void(0)" class="a-choose">全部</a> 
									<a href="javascript:void(0)" >2016</a>
									<a href="javascript:void(0)" >2015</a> 
									<a href="javascript:void(0)" >2014</a> 
									<a href="javascript:void(0)" >2013</a> 
									<a href="javascript:void(0)" >2012</a> 
									<a href="javascript:void(0)" >2011</a> 
									<a href="javascript:void(0)" >2010</a> 
									<a href="javascript:void(0)" >2009</a> 
									<a href="javascript:void(0)" >2008</a>
									<a href="javascript:void(0)" >2007</a>
									<a href="javascript:void(0)" >2006</a> 
									<a href="javascript:void(0)" >2005</a>
									<a href="javascript:void(0)" >2004</a>
								</dd>
							</dl>							
							<dl class=" listIndex" attr="terminal_activity_s">
								<dt>清晰度</dt>
								<dd>
									<a href="javascript:void(0)" class="a-choose">全部</a> 
									<a href="javascript:void(0)" >流畅</a>
									<a href="javascript:void(0)" >高清</a> 
									<a href="javascript:void(0)" >超清</a> 
									<a href="javascript:void(0)" >1080P</a> 
								</dd>
							</dl>
							<div class="hasBeenSelected">
								<dl>
									<dt>已选择</dt>
									<dd style="display:none" class="clearDd">
										<div class="clearList"></div>
										<div class="eliminateCriteria">共1000条删选结果</div>
									</dd>
								</dl>
							</div>	
						</div>						
						
					<!--</div>-->
				</div>				
			</div>
			<div class="enjoy">
				<div class="sort">排序</div>
				<ul class="sort-style">
					<li class="li-x">最新上映</li>
					<li>人气</li>
				</ul>
				<ul class="only">
					<a href="#">	
						<li>
							<img src="img/film.jpg" alt="" />
						    <p class="c-title">画皮简介简介简介</p>
					        <p class="c-word">简介简介简介</p>
					        <span class="bj">独播</span>
						</li>
					</a>
					<a href="#">	
						<li>
							<img src="img/film.jpg" alt="" />
						    <p class="c-title">画皮简介简介简介</p>
					        <p class="c-word">简介简介简介</p>
					        <span class="bj">独播</span>
						</li>
					</a>
					<a href="#">	
						<li>
							<img src="img/film.jpg" alt="" />
						    <p class="c-title">画皮简介简介简介</p>
					        <p class="c-word">简介简介简介</p>
					        <span class="bj">独播</span>
						</li>
					</a>	
					<a href="#">
						<li>
							<img src="img/film.jpg" alt="" />
						    <p class="c-title">画皮简介简介简介</p>
					        <p class="c-word">简介简介简介</p>
					        <span class="bj">独播</span>
						</li>
					</a>	
					<a href="#">
						<li>
							<img src="img/film.jpg" alt="" />
						    <p class="c-title">画皮简介简介简介</p>
					        <p class="c-word">简介简介简介</p>
					        <span class="bj">独播</span>
						</li>
					</a>
					<a href="#">
						<li>
							<img src="img/film.jpg" alt="" />
						    <p class="c-title">画皮简介简介简介</p>
					        <p class="c-word">简介简介简介</p>
					        <span class="bj">独播</span>
						</li>
					</a>
					<a href="#">
						<li>
							<img src="img/film.jpg" alt="" />
						    <p class="c-title">画皮简介简介简介</p>
					        <p class="c-word">简介简介简介</p>
					        <span class="bj">独播</span>
						</li>
					</a>
					<a href="#">
						<li>
							<img src="img/film.jpg" alt="" />
						    <p class="c-title">画皮简介简介简介</p>
					        <p class="c-word">简介简介简介</p>
					        <span class="bj">独播</span>
						</li>
					</a>	
					<a href="#">	
						<li>
							<img src="img/film.jpg" alt="" />
						    <p class="c-title">画皮简介简介简介</p>
					        <p class="c-word">简介简介简介</p>
					        <span class="bj">独播</span>
						</li>
					</a>	
					<a href="#">
						<li>
							<img src="img/film.jpg" alt="" />
						    <p class="c-title">画皮简介简介简介</p>
					        <p class="c-word">简介简介简介</p>
					        <span class="bj">独播</span>
						</li>
					</a>					
				</ul>
			</div>			
			<div class="sort-more">
				<a href="#">加载更多+</a>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="js/jquery-2.2.3.min.js" ></script>
	<script type="text/javascript" src="js/shaixuan.js" ></script>
	<script >	
		$(document).ready(function(){
			$(document).scroll(function () {
				if($(document).scrollTop()>380){
				   $('.header').addClass('hearder-position');
				   $('.nav').show();
			    }else{
			    	$('.header').removeClass('hearder-position');
			    	$('.nav').hide();
			    	$('.nav-list').hide()
			    }
			})
			$('.nav').click(function(){
				$('.nav-list').toggle();
			});
			$('.channel-style li').click(function(){
				$(this).addClass('li-choose').siblings().removeClass('li-choose');
			})
			$('.sort-style li').click(function(){
				$(this).addClass('li-x').siblings().removeClass('li-x');
			})						
			$('.kg').click(function(){
				$('.second-title').toggle();
				if($('.second-title').css('display')=='block'){
					$('.kg span').html('收起选项');
					$('.kg img').attr('src','img/close.png');
					$('.kg').css('bottom','10px')
				}else{
					$('.kg span').html('展开选项');
					$('.kg img').attr('src','img/open.png');
					$('.kg').css('bottom','25px')
				}
			})
			
			$(".only li").hover(function(){
			  	var oHeight=$(this).children('img').height();
			  	var oWidth=$(this).children('img').width();
			  	if(oHeight==329&&oWidth==230){
			  		if($(this).append(" <div class='run-long'></div>")){
					    $('.run-long').append('<img src="img/run.png" alt="" />')
					}
			  	}					
			},function(){
			  	if($(this).remove(".run-long")){
			    	$('.run-long').remove();
			    }
			});
			$('.only li').each(function(index){
				index=(index+1)*5-1;
				$('.only li').eq(index).addClass('li-none');
			})	
			
		})
	</script>
</html>

